<template>
  <div class="addEdit">
    <el-dialog
      :title="showTitle"
      :visible="dialogFormVisible"
      @close="btnCancel"
    >
      <!-- 表单 -->
      <el-form
        ref="addForm"
        :model="FormData"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="FormData.username"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="FormData.email"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item v-if="!currentrow.id" label="密码" prop="password">
          <el-input
            v-model="FormData.password"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-input
            v-model="FormData.role"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select
            v-model="FormData.permission_group_id"
            style="width: 35%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in simplelist"
              :key="item.id"
              :value="item.id"
              :label="item.title"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="FormData.phone"
            style="width: 45%"
            placeholder=" "
          />
        </el-form-item>
        <el-form-item label="介绍">
          <el-input
            resize="none"
            style="width: 45%"
            type="textarea"
            :rows="2"
            placeholder="please input"
          />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" class="btnOk" @click="btnOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getsimplelist } from '@/api/base/permissions'
import { adduser, edituser } from '@/api/base/users'
const defaultItem = {
  username: '',
  password: '',
  phone: '',
  role: '',
  permission_group_id: '',
  avatar: '',
  email: ''
}
export default {
  name: 'AddEdit',
  props: {
    currentrow: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ]
      },
      FormData: {
        ...defaultItem
      },
      simplelist: []
    }
  },
  computed: {
    showTitle() {
      return this.currentrow.id ? '编辑用户' : '新增用户'
    }
  },
  created() {
    this.getsimplelist()
  },
  mounted() {},

  methods: {
    // 获取权限组名称
    async getsimplelist() {
      const data = await getsimplelist()
      this.simplelist = data.data
      console.log(this.simplelist)
    },

    // 添加提交
    async btnOk() {
      try {
        await this.$refs.addForm.validate()
        if (this.currentrow.id) {
          await edituser({ id: this.currentrow.id, ...this.FormData, password: '123456' })
        } else {
          await adduser(this.FormData)
        }
        this.$emit('updataList')
        this.dialogFormVisible = false
        this.$message.success('操作成功')
        this.$emit('clear')
        this.FormData = { ...defaultItem }
        this.$refs.addForm.resetFields()
      } catch (error) {
        console.log(error)
      }
    },
    // 取消
    btnCancel() {
      this.dialogFormVisible = false
      this.$emit('clear')
      this.FormData = { ...defaultItem }
      console.log(this.FormData)
      this.$refs.addForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.addEdit {
  ::v-deep .el-dialog {
    border-radius: 10px;
    overflow: hidden;
    margin-top: 8vh !important;
    .el-dialog__header {
      background-color: #409eff;
      .el-dialog__title {
        color: #fff;
      }
      .el-icon-close:before {
        color: #fff;
      }
    }
    .el-dialog__body {
      margin-bottom: -20px;
      .el-form-item__label {
        width: 230px !important;
      }
    }
    .el-dialog__footer {
      padding-top: 0 !important;
      .btnOk {
        margin-right: 60px;
      }
    }
  }
}
</style>
